<template>
	<view class="my-integral">
		<g-navbar title="我的积分" fontColor="#ffffff" backgroundColor="none" />
		<view class="title">
			当前可用积分
			<view class="detail-entry" @click="jump">
				积分明细<i class="iconfont icon-arrow-right icon" />
			</view>
		</view>
		<view class="integral-count">
			{{userInfo.score}}
		</view>
		<view class="integral-explain-container" v-for="item,index in integralExplainList" :key="index">
			<view class="explain-title">
				{{item.title}}
			</view>
			<view class="content">
				<view class="content-item" v-for="citem,cindex in item.content" :key="cindex">
					{{citem}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import REST_URL from '@/http/http.restUrl';
	import { useStore } from 'vuex';
	import { Ref, ref } from 'vue';
	import { GET_STORE_USERINFO } from '@/store/gettersType';

	interface IIntegralExplain {
		title : string;
		content : string[];
	}
	const integralExplainList : Ref<IIntegralExplain[]> = ref([
		{
			title: '如何获得积分',
			content: [
				'刷信用卡',
				'信用卡交易可获得一定积分。'
			]
		},
		{
			title: '积分有什么用',
			content: [
				'抽红包',
				'使用积分可以参与红包抽奖。'
			]
		},
	])

	const store = useStore();

	const getIntegralPolicy = async () => {
		await uni.loginManger.$interceptor;
		const { data } = await uni.http.POST(REST_URL.integralPolicy, {
			customer_id: store.getters[GET_STORE_USERINFO].id
		})
		// console.log(integralExplainList.value)
		integralExplainList.value = data.map(item=>{
			item.content = item.content.split('\r')
			return item
		})
		console.log(integralExplainList.value);
	}

	getIntegralPolicy();

	const jump = () : void => {
		uni.router.route("/pages_integral/integral_detail/integralDetail")
	}
</script>

<style scoped lang="scss">
	@import "./myIntegral.scss";
</style>